
<!--<template>-->
<!--  &lt;!&ndash; 抽屉组件：默认隐藏，点击按钮后显示 &ndash;&gt;-->
<!--  <el-drawer-->
<!--      :title="'粉丝列表（共 ' + allFenCount + ' 条）'"-->
<!--      :model-value="drawerVisible"-->
<!--      :width="500"-->
<!--      @close="handleClose"-->
<!--  >-->
<!--    &lt;!&ndash; 粉丝表格：展示ID和时间 &ndash;&gt;-->
<!--    <el-table :data="fenSiList" stripe style="width: 100%">-->
<!--      <el-table-column prop="fanId" label="粉丝ID" width="180" />-->
<!--      <el-table-column label="粉丝昵称" width="180">-->
<!--        <template #default="scope">-->
<!--          {{ scope.row.nickname || '加载中...' }}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="time" label="关注时间" width="180" />-->
<!--      &lt;!&ndash; 可根据实际字段补充其他列（如粉丝昵称等） &ndash;&gt;-->
<!--    </el-table>-->
<!--  </el-drawer>-->
<!--</template>-->

<!--<script setup lang="ts">-->
<!--import { ref, defineExpose } from 'vue'-->
<!--import axios from 'axios'-->
<!--const allFenCount = ref(0)-->
<!--// 控制抽屉显示/隐藏-->
<!--const drawerVisible = ref(false)-->
<!--// 粉丝列表数据-->
<!--const fenSiList = ref<any[]>([])-->


<!--const getUserNameByFanId = async (fanId: string) => {-->
<!--  // 直接调用用户接口（假设接口为/api/user/{id}，返回数据含nc字段）-->
<!--  const { data } = await axios.get(`/api/user/${fanId}`)-->
<!--  return data.nc || '未知用户' // 昵称字段为nc，不存在则显示默认值-->
<!--}-->


<!--// 加载粉丝数据（传递 Relations 对象）-->
<!--const loadFenSiData = async (relations: any) => {-->
<!--    const { data } = await axios.get('/api/relation', {-->
<!--      params: relations // 直接传递对象，axios 会自动拆分为 key=value 形式-->
<!--    })-->
<!--    fenSiList.value = data-->
<!--    allFenCount.value=data.length-->
<!--  for (const item of fenSiList.value) {-->
<!--      // 直接查询并赋值给当前粉丝项的nickname字段-->
<!--      item.nickname = await getUserNameByFanId(item.fanId)-->
<!--  }-->
<!--}-->


<!--// 调用时传递完整对象（例如从父组件接收 userId 后构建）-->
<!--const handleDetailData = async (userId: string) => {-->
<!--  drawerVisible.value = true-->
<!--  // 构建 Relations 对象（按需传递属性）-->
<!--  const relations = {-->
<!--    userId: userId, // 父组件传递的用户 ID-->
<!--    fenId: '',      // 可选：其他属性（如粉丝 ID 筛选）-->
<!--    time: ''        // 可选：时间筛选-->
<!--  }-->
<!--  await loadFenSiData(relations)-->
<!--}-->

<!--// 关闭抽屉-->
<!--const handleClose = () => {-->
<!--  drawerVisible.value = false-->
<!--}-->

<!--// 暴露方法给父组件调用-->
<!--defineExpose({-->
<!--  handleDetailData-->
<!--})-->
<!--</script>-->

<!--<style scoped>-->
<!--/* 可自定义表格或抽屉样式 */-->
<!--::v-deep .el-drawer__body {-->
<!--  padding: 20px;-->
<!--}-->
<!--</style>-->
<template>
  <el-drawer
      :title="'粉丝列表（共 ' + allFenCount + ' 条）'"
      :model-value="drawerVisible"
      :width="500"
      @close="handleClose"
  >
    <el-table :data="fenSiList" stripe style="width: 100%">
      <el-table-column prop="fanId" label="粉丝ID" width="120" />
      <el-table-column label="粉丝昵称" width="120">
        <template #default="scope">
          {{ scope.row.nickname || '加载中...' }}
        </template>
      </el-table-column>
      <el-table-column prop="time" label="关注时间" width="120" />
    </el-table>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue'
import axios from 'axios'
const allFenCount = ref(0)
// 控制抽屉显示/隐藏
const drawerVisible = ref(false)
// 粉丝列表数据
const fenSiList = ref<any[]>([])


const getUserNameByFanId = async (fanId: string) => {
  // 直接调用用户接口（假设接口为/api/user/{id}，返回数据含nc字段）
  const { data } = await axios.get(`/api/user/${fanId}`)
  return data.nc || '未知用户' // 昵称字段为nc，不存在则显示默认值
}


// 加载粉丝数据（传递 Relations 对象）
const loadFenSiData = async (relations: any) => {
  const { data } = await axios.get('/api/relation', {
    params: relations // 直接传递对象，axios 会自动拆分为 key=value 形式
  })
  fenSiList.value = data
  allFenCount.value=data.length
  for (const item of fenSiList.value) {
    // 直接查询并赋值给当前粉丝项的nickname字段
    item.nickname = await getUserNameByFanId(item.fanId)
  }
}


// 调用时传递完整对象（例如从父组件接收 userId 后构建）
const handleDetailData = async (userId: string) => {
  drawerVisible.value = true
  // 构建 Relations 对象（按需传递属性）
  const relations = {
    userId: userId, // 父组件传递的用户 ID
    fenId: '',      // 可选：其他属性（如粉丝 ID 筛选）
    time: ''        // 可选：时间筛选
  }
  await loadFenSiData(relations)
}

// 关闭抽屉
const handleClose = () => {
  drawerVisible.value = false
}

// 暴露方法给父组件调用
defineExpose({
  handleDetailData
})
</script>

<style scoped>
</style>
